<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>盒子</title>
    <style>
        #d1 {
            width: 400px;
            height: 400px;
            font-size: 20px;
            background-color: skyblue;

            /*每侧设置不同边距,顺时针方向*/
            /* padding-top: 5px; */
            /* padding-right: 10px; */
            /* padding-bottom: 5px; */
            /* padding-left: 20px; */

            /*复合写法,一个值(4个方向)，两个值(上下，左右),三个值(上，左右，下),四个值(上 右 下 左)*/
            padding: 10px 20px 30px 40px;
        }

        span {
            background-color: orange;
            /*行内元素左右边距可以设置，但是上下元素会占位，不建议设置(块，行内块都行,就行内不建议)*/
            padding-left: 20px;
            padding-right: 10px;
        }

        #d2 {
            width: 400px;
            height: 400px;
            font-size: 20px;
            background-color: green;

            /*默认宽度是3px ,如果不是，是电脑进行了放大,电脑放大两倍，那么1.5就可以达到3，就是1.5*/

            /*上下左右边框*/
            /*可复合成border-left ,了解即可*/
            border-left-width: 10px;
            border-left-color: red;
            border-left-style: solid;

            border-right-width: 20px;
            border-right-color: blue;
            border-right-style: solid;

            border-top-width: 5px;
            border-top-color: orange;
            border-top-style: dashed;

            border-bottom-width: 4px;
            border-bottom-color: yellow;
            border-bottom-style: dotted;
        }

        #d3 {
            width: 400px;
            height: 400px;
            background-color: skyblue;

            /*margin也有上下左右不同的值*/
            margin: 10px 20px 30px 40px;
        }
    </style>
</head>
<body>
<img src="../../images/边距总结.png" style="width: 500px">
<div id="d1">你好啊</div>
<hr>
<div id="d2">你好啊2</div>

<hr>
<div id="d3">你好啊3</div>

</body>
</html>